<template>
	<view class="mov-img">
		<movable-area scale-area class="movable-box" :style="{ height: height + 'px'}">
			<movable-view :style="{ width: width + 'px',height: height + 'px'}" scale direction="all" scale-min="0.5" scale-max="4" :scale-value="scale">
				<image :src="src" class="custom-img"></image>
			</movable-view>
		</movable-area>
	</view>
</template>
<script>
	export default {
		name: "movImg",
		props: {
			src: {
				type: String,
				default: ''
			},
			scale: {
				type: Number,
				default: 1
			},
		},
		watch: {
			src: {
				handler(newVal, oldVal) {
					this.getImgWidth(newVal)
				},
				immediate: true
			}
		},
		data() {
			return {
				width: '',
				height: '',
			};
		},
		methods: {
			async getImgWidth(url){
				if(!url) return
				let imageInfoObj = await uni.getImageInfo({src: url})
				// 取到图片的宽高
				this.width = imageInfoObj[1].width
				this.height = imageInfoObj[1].height
			}
		},
		mounted() {},
	};
</script>
<style lang="less" scoped>
	.mov-img {
		width: 100%;
		height: 100%;
		.movable-box {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.custom-img {
			max-width: none;
			width: 100%;
			height: 100%;
		}
	}
</style>
